<template>
    <div class="contacts">
        <!-- 顶部 -->
        <div class="top">
            <div class="callback" @click="$router.back()">
                <img src="@/assets/callback.png" alt="">
            </div>
            <div class="top-title">
                Contacts
            </div>
        </div>
        <div v-html="list.formDesc" class="contactsDesc"></div>
        <van-form @submit="onSubmit" class="form">
            <div v-for="item in listdata" class="list">
                <div class="title">{{ item.mes }}</div>
                <van-field v-model="form.model.submitData.userEmergs[item.id].name" name="用户名" label="name"
                    placeholder="Please enter your name" :rules="[{ required: true, message: 'Please enter your name' }]" />
                <van-field v-model="form.model.submitData.userEmergs[item.id].phone" name="phone" label="phone"
                    placeholder="Please fill in the phone number"
                    :rules="[{ required: true, message: 'Please fill in the phone number' }, {}]" />
                <!-- 选择关系 -->
                <van-field :rules="[{ required: true, message: 'Please select your relationship with the contact' }]"
                    readonly clickable name="relation" v-model="form.model.submitData.userEmergs[item.id].relation"
                    :value="value" label="relation" placeholder="Please select your relationship with the contact"
                    @click="showPicker = true; index = item.id" />
                <van-popup v-model="showPicker" position="bottom">
                    <van-picker confirm-button-text="Confirm" cancel-button-text="Cancel" show-toolbar :columns="gxlist"
                        @confirm="doConfirm" @cancel="showPicker = false" />
                </van-popup>
            </div>
            <!-- 按钮 -->
            <van-button class="contactsBtn" type="submit">Submit</van-button>
        </van-form>
    </div>
</template>
<script>
import { uploadbaseform, getdefaultform } from '../../api/index.js'
import { jiami, jiemi } from '../../utils/aeskey.js'
import { Toast } from 'vant'
export default {
    name: 'Contacts',
    data() {
        return {
            showPicker: false,
            value: '',
            index: '',
            list: [],
            form: {
                model: {
                    formId: '',
                    submitData: {
                        userEmergs: [
                            { name: '', phone: '', relation: '' },
                            { name: '', phone: '', relation: '' },
                            { name: '', phone: '', relation: '' }
                        ]
                    }
                }
            },
            listdata: [
                { id: 0, mes: 'Emergency contact 1' },
                { id: 1, mes: 'Emergency contact 2' },
                { id: 2, mes: 'Emergency contact 3' }
            ],
            //关系列表
            gxlist: []
        }
    },
    methods: {
        //提交表单
        async onSubmit() {
            this.form.model.formId = this.$store.state.formData[0].formId
            console.log(this.form)
            const res = await uploadbaseform(jiami(this.form))
            Toast('Submitted successfully')
            location.reload();
            this.$store.dispatch('weiwancehngform')
            // this.$router.push('/bank')
        },
        //获取指定表单
        async getForm() {
            const r = {
                model: {
                    formId: this.$store.state.formData[0].formId || [],
                    nodeType: ''
                }
            }
            const res = await getdefaultform(jiami(r))
            this.gxlist = jiemi(res.data).model.forms[0].content[0].props.relationList.map(item => item.id)
            console.log('关系列表', this.gxlist)
        },
        //当关系选择完毕时执行
        doConfirm(item, value) {
            this.form.model.submitData.userEmergs[this.index].relation = item
            this.showPicker = false
        }
    },
    created() {
        this.$store.dispatch('weiwancehngform')
        this.list = this.$store.state.formData[0] || []
        this.getForm()
        console.log(this.list)
    }
}
</script>
<style lang="less" scoped>
@a: 3.75vw;

.contacts {
    width: 100vw;
    height: (700/@a);
    background-color: #f5f5f5;
    padding-top: (67/@a);
    box-sizing: border-box;

    .contactsDesc {
        margin-left: (30/@a);
        margin-right: (30/@a);
    }

    .form {
        .list {
            margin-top: (10/@a);
        }

        .contactsBtn {
            width: (232/@a);
            height: (44/@a);
            background: linear-gradient(90deg, #8042FF 0%, #BC37FF 100%);
            border-radius: (10/@a);
            margin-top: (20/@a);
            margin-left: (70/@a);
        }

        .title {
            font-family: 'Inter';
            font-style: normal;
            font-weight: 500;
            font-size: (16/@a);
            color: #101010;
        }
    }

    .top {
        height: (56/@a);
        background-color: #fff;
        width: 100vw;
        display: flex;
        justify-content: space-between;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99;

        .callback {
            margin-top: (20/@a);
            margin-left: (15/@a);
            width: (10/@a);

            img {
                width: 100%;
            }
        }

        .top-title {
            margin-top: (17/@a);
            margin-right: (150/@a);
            font-family: 'Inter';
            font-style: normal;
            font-weight: 400;
            font-size: (18/@a);
            color: #202020;
        }
    }

}
</style>